<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="applicable-device" content="pc,mobile">
    <meta name="viewport"
        content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1,user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
    <meta http-equiv="Expires" content="0">
    <title>折线图展示数据</title>
</head>

<body>
    <div id="main" style="height: 800px;"></div>

    <script src="https://static.ycgame.com/packages/jquery/1.12.3/jquery.min.js"></script>
    <script src="../dist/line_bar.bundle.js"></script>
    <script>
        var config = {
            id: 'main',
            title: 'xxx图',
            xfield: 'tm',
            defaultSeriesType: 'line',
            series: [
                // { name: 'a', showname: 'a', type: 'line' },
                // { name: 'b', showname: 'b', type: 'bar' },
            ]
        }
        var mychart = new RenderChart(config).init();

        // 转换得到标准格式数据 [{tm:"",a:1]}
        function convertToRuntimeData(data) {
            //data = 'svrid=123'
            var array = data.split('=');
            return [{ tm: getStringDate(), [array[0]]: parseFloat(array[1]) }]
        }

        // 转换得到标准格式数据 [a,1]
        function convertToRuntimeAddData(data) {
            //data = 'svrid=123'
            var array = data.split('=');
            return array;
        }

        // 获得新的series (图-列)
        function getNewSeries(config, array) {
            if (!config) return [];
            var xAxis = config.xAxis;
            var series = config.series;
            if (!$.isArray(array)) return series;
            // 遍历列表所有数据
            for (var i = 0; i < array.length; i++) {
                var itemobj = array[i];
                if (!itemobj || typeof (itemobj) != "object") continue;
                // 遍历每条数据对象详细
                for (var k in itemobj) {
                    // 排除选择的x轴 和 不是数字类型值的key 和 已有的列
                    if (k == 'tm' || isNaN(itemobj[k]) || is_in_array_kv(series, "name", k)) { continue; }
                    else {
                        var pushOne = { name: k, showname: k, type: 'line', data: [] };
                        for (i = 0; i < xAxis.data.length; i++) { pushOne["data"].push(0); }
                        series.push(pushOne)
                    }
                }
                xAxis.data.push(itemobj['tm']);
            }
            // 这里是x轴的数组 y轴的数组
            return { series: series, xAxis: xAxis.data };
        }
        var count = 0;
        function onReceive(resdata) {
            count++;
            // 用户数据转换到标准数据
            var data = convertToRuntimeData(resdata);
            var config = mychart.getConfig();
            var newConfig = getNewSeries(config, data);
            var newSeries = newConfig.series;   //根据数据得到的新的所有y轴
            var newXAxis = newConfig.xAxis;     //根据数据得到的新的所有x轴数据
            // 重载config xAxis:[xxxx1,xxxx2,xxxx3] series:[{name:a,showname:a:type:'line',data:[]},{name:b,showname:b:type:'line',data:[]}]
            mychart.setConfig({ xAxis: newXAxis, series: newSeries });
            // 追加数据 [key:val]
            mychart.addDataSource(convertToRuntimeAddData(resdata));
            console.log(config.series.length,count);
        }

        onReceive("a=5");
        setTimeout(function () { onReceive("a=1"); }, 1000)
        setTimeout(function () { onReceive("b=3"); }, 3000)
        setTimeout(function () { onReceive("c=2"); }, 5000)
        setTimeout(function () { onReceive("b=8"); }, 7000)
        setTimeout(function () { onReceive("d=5"); }, 9000)

        // var ws = new WebSocket('ws:192.168.33.63:10086/websocket');
        // ws.onopen = function (evt) {
        //     console.log("on open");
        // }
        // ws.onclose = function (evt) {
        //     console.log("on close");
        // }
        // ws.onmessage = function (evt) {
        //     console.log(evt.data);
        //     onReceive(evt.data);
        // }


        // 返回日期时间的字符串转换
        function getStringDate(param, date) {
            var now = date ? date : new Date(), string = "";
            var year = now.getFullYear();
            var month = now.getMonth() + 1;
            var day = now.getDate();
            var h = now.getHours();
            var m = now.getMinutes();
            var s = now.getSeconds();
            month = (month < 10 ? "0" : "") + month;
            day = (day < 10 ? "0" : "") + day;
            h = (h < 10 ? "0" : "") + h;
            m = (m < 10 ? "0" : "") + m;
            s = (s < 10 ? "0" : "") + s;
            switch (param) {
                case "day": string = year + "-" + month + "-" + day; break;
                case "h": string = year + "-" + month + "-" + day + " " + h; break;
                case "m": string = year + "-" + month + "-" + day + " " + h + ":" + m; break;
                case "s": string = year + "-" + month + "-" + day + " " + h + ":" + m + ":" + s; break;
                case "filename": string = year + "" + month + "" + day + "" + h + "" + m + "" + s; break;
                default: string = year + "-" + month + "-" + day + " " + h + ":" + m + ":" + s; break;
            }
            return string;
        }

        // 是否在数组里存在
        function is_in_array_kv(array, key, search) {
            if (!$.isArray(array)) return false;
            for (var i in array) {
                if (array[i] && array[i][key] == search) {
                    return true;
                }
            }
            return false;
        }
    </script>
</body>

</html>